<template>
	<div class="comments">
		<h4>发表评论</h4>	
	    <textarea placeholder="请输入要BB的内容（最多吐槽120字）" maxlength="120" v-model="msg">
	    </textarea>

	    <mt-button type="primary" size="large" @click="postComment">发表评论</mt-button>

	    <div class="cmt-list">
			<div class="comment" v-for="comment in commentList" :key="comment.name">
				<!-- <img :src="image" v-for="image in comment.images"> -->
				<div> 
					<h5>
						<span>评论人：{{ comment.name }}</span>
						<span>评论时间：{{ comment.date }}</span>
					</h5>
					<p>{{ comment.content }}</p>
				</div>
			</div>
		</div> 

	    
	    <mt-button type="danger" size="large" plain @click="getMore">加载更多</mt-button>
	</div>
</template>

<script>

	import { Toast } from 'mint-ui';
	import moment from 'moment'

	export default {
		data(){
			return {
				limit:5,
				pages:1,//这里的页面数指的是：要显示多少页的评论 从前面开始！！	
				msg:""
			}
		},
		methods:{
			postComment(){

				if(this.msg.trim()==""){
					return Toast("数据为空啊！")
				}

				this.newsinfo.comments.unshift({
					"name":parseInt(Math.random()*10000000),
					"date":moment().format("YYYY-MM-DD"),
					"content":this.msg
				})
			},
			getMore(){			
				if(this.pages<this.totalPages){
					this.pages=this.pages+1 // 加载更多 只要不超出就多添加一页的评论
				}else{
					Toast("到底了啊！")
				}

			}
		},

		//计算属性真的好用，根据数据去调整数据
		computed:{
			commentList:function  () {
				//不能直接使用map方法返回的新数组  因为不匹配的元素也放在新数组中做为undefind！！
				var arr = [];

				//使用异步获取的数据 一定判断数据的正确性  不然会报错------------------------等待正确的数据到来
				if(this.newsinfo.comments){
					this.newsinfo.comments.map( (item,i)=>{
						//根据页面数显示评论
						if(i<this.pages*this.limit){
							arr.push(item)
						}
				    })
				}
				return arr
			},
			totalPages:function  () {
				return Math.ceil(this.newsinfo.comments.length/5)
			}
		},
		props:["newsinfo"],
		created(){
		},
		
	}
</script>

<style lang="scss" scoped>
	.comments {
		padding: 0px 7px;
		h4 {
			text-indent: 1em;
			color:darkorange;
		}
	}
	
	/*评论区样式*/
	.cmt-list {
			.comment {
				padding-top: 10px;
				img {
					width: 60px;
					height: 60px;
					margin-right: 5px;
				}
				h5 {
					display: flex;
					justify-content:space-between;
					color: red;
				}
			}
		}
</style>